<% var headContent = { %>
<!-- //这里包含需要引入的其他css/js文件 -->
<style>
 /*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
  /*附件上传*/
  .am-progress-xs {
    height: .2rem;
  }
  .am-progress {
    margin-bottom: 0;
  }
</style>
<%};%> <%layout("/common/_layout.html",{head:headContent}){%>
<form method="post" class="am-form" id="tmpForm"
	action="${base}/banner/save">
	<!--选项卡（tabs）begin-->
	<div class="am-tabs am-margin" data-am-tabs>
		<ul class="am-tabs-nav am-nav am-nav-tabs">
			<li class="am-active"><a href="#tab1">编辑广告信息</a></li>
		</ul>
		<div class="am-tabs-bd">
			<div class="am-tab-panel am-fade am-in am-active" id="tab1">
				<input name="bannerID" id="bannerID" type="hidden"
					value="${bannerID!}" />
				<!--验证表单元素（validate) begin-->

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span style="color: red;">*</span>广告名称
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input name="bannerName" class="js-ajax-validate"
							data-validate-async data-validation-message="请输入广告名称（100字符以内）"
							type="text" id="bannerName" value="${bannerName!}" minlength="1"
							maxlength="100" placeholder="请输入广告名称（100字符以内）" required />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">分公司名称</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected="{ maxHeight: 300}"
								name="orgID" id="orgID">
							<%for(org in orgs){%>
							<option value="${org.value}" <%if(org.value == orgID!""){%>
							selected
							<%}%>>${org.key}</option>
							<%}%></select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						服务类型
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected name="serverType">
							<option value="1"<%if(serverType!"" == 1){%>selected<%}%>>大市场通用</option>
							<option value="2"<%if(serverType!"" == 2){%>selected<%}%>>校园专区</option>
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>


				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						活动类型
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected name="bannerType">
							<option value="0">外链</option>
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>封面图片</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" id="bannerImageUrl" name="bannerImageUrl" maxlength="200"
							value="${bannerImageUrl!""}" required
							placeholder="请上传图片（ *.gif,*.jpg,*.jpeg,*.png ）" />
					</div>
					<div class="am-u-sm-2 am-u-md-4">
						<div class="am-form-file am-text-xs">
              <button type="button" class="am-btn am-btn-primary am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 选择要上传的文件
              </button>
              <input id="fileupload" type="file" name="files[]" multiple>
            </div>
            <!-- The global progress bar -->
            <div id="progress-area" class="am-margin-top-sm am-hide">
              <div id="progress-text" class="am-text-xs am-text-right"></div>
              <div id="progress" class="am-progress am-progress-xs">
                <div class="am-progress-bar" style="width: 0%"></div>
              </div>
            </div>
					</div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>活动URL</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" class="am-input" name="bannerUrl" placeholder="请输入活动URL地址（200字符以内）" maxlength="200"
							value="${bannerUrl!}" required  pattern="(http|https)://[^\s']+"/>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">排序</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" class="am-input js-pattern-sort" name="bannerSort"  data-validation-message="排序不能为空且只能是纯数字" placeholder="请输入纯数字,越小越向前" maxlength="11" required
							value="${bannerSort!99}" />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">是否启用</div>
					<div class="am-u-sm-12 am-u-md-4 switch-button">
						<input id="switch" name="switch" type="checkbox" data-size='xs'
							data-am-switch data-off-text="否" data-on-text="是"<%if
						(enabled! == null || enabled! == 1){%> checked <%}%> > <input
							type="hidden" class="am-input-sm" name="enabled" id="enabled"
							value="${enabled!1}" />
					</div>
					<div class="am-hide-sm-only am-u-md-1" style="color: red;"></div>
					<div class="am-u-sm-2 am-u-md-5 input-msg"></div>
				</div>
			</div>
			<!--验证表单元素（validate end-->
		</div>
	</div>
	<!--选项卡（tabs）end-->
	<div class="am-margin">
		<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
		<button type="button" class="am-btn am-btn-warning am-btn-xs"
			onclick="javascript:history.go(-1);">返回上一级</button>
	</div>
</form>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="${base}/template/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="${base}/template/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="${base}/template/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script type="text/javascript">

    $(function(){
    var $mycheckbox = $('.switch-button');
	$mycheckbox.each(function() {
		$("#switch").on({
			'switchChange.bootstrapSwitch' : function(event, state) {
				if (state.toString() == "true") {
					$("#enabled").val("1");
				} else {
					$("#enabled").val("0");
				}
			}
		});
	});

	/*上传图片 begin*/
  var jqXHR = $('#fileupload').fileupload({
      url: "${base}/upload/image/",
      dataType: 'json',
      start: function (e) {
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").removeClass("am-text-danger");
        $("#progress-text").html("");
        $(".am-progress-bar").css("width","0%");
      },
      done: function (e, data) {
        console.log(data);
        $("#bannerImageUrl").val(data.result.url);
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");    
        },1500);        
      },
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $(".am-progress-bar").css("width",progress + "%");
        $("#progress-text").html(progress + "%");
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log("imageupload error！");
        // console.log(jqXHR);
        // console.log(textStatus);
        // console.log(errorThrown);
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").addClass("am-text-danger");
        $("#progress-text").html("imageupload error！");
        $(".am-progress-bar").css("width","0%");
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");    
        },2000);
      },
      fail: function (jqXHR, textStatus) {
        console.log("imageupload fail！");
        // console.log(jqXHR);
        // console.log(textStatus);
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").addClass("am-text-danger");
        $("#progress-text").html("imageupload fail！");
        $(".am-progress-bar").css("width","0%");
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");    
        },2000);
      }
    });
    /*上传图片 end*/
    
    /*表单验证：begin*/
    //自定义规则，用法：验证元素上加class="js-pattern-sort"
    if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
    }
    $("#tmpForm").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
      }
    });
    /*表单验证：end*/
    
});
</script>
<%}%>
